<template>
  <div class="big">
    <div :class="{ nav: show }" v-show="show">
      <van-nav-bar :title="cinemaData.name">
        <template #left>
          <van-icon
            name="arrow-left"
            size="20"
            color="#656566"
            fixed="true"
            @click="back"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="pic">
      <img :src="cinemaData.poster" alt="" />
    </div>
    <div class="text">
      <p class="title">
        {{ cinemaData.name }}<span>{{ cinemaData.timeType }}D</span>
      </p>
      <p class="desc">{{ cinemaData.category }}</p>
      <p class="data">{{ cinemaData.premiereAt | formatDate }}</p>
      <p class="time">{{ cinemaData.nation }} | {{ cinemaData.runtime }}分钟</p>
      <p :class="{ active: msgShow, miaoshu: !msgShow, tiyi: true }">
        {{ cinemaData.synopsis }}
      </p>
      <p class="icon">
        <van-icon name="arrow-down" size="15px" @click="msg" />
      </p>
    </div>
    <div class="bigbox">
      <p class="bt">演职人员</p>
      <div class="swiper actor">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(msg, index) in cinemaData.actors"
            :key="index"
          >
            <img :src="msg.avatarAddress" alt="" />
            <p class="name">{{ msg.name }}</p>
            <p class="juese">{{ msg.role }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bigbox">
      <div class="bt po">
        <p class="le">剧照</p>
        <p class="ri">全部({{ potoLength }})<van-icon name="arrow" /></p>
      </div>
      <div class="swiper actor photo">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(msg, index) in cinemaData.photos"
            :key="index"
            style="width: 190px"
          >
            <img :src="msg" alt="" width="100%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Image as VanImage } from "vant";
// import "swiper/swiper-bundle.min.css";

import Swiper from "swiper";
import "swiper/swiper.min.css";
import { NavBar, Icon } from "vant";
import { getDetailInfo } from "@/request/request";
Vue.use(VanImage);

Vue.use(Icon);
Vue.use(NavBar);
export default {
  computed: {},
  filters: {
    formatDate(val) {
      let date = new Date(val * 1000);
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      return year + "年" + month + "月" + day + "日";
    },
  },
  created() {},
  data() {
    return {
      cinemaId: 0,
      cinemaData: {},
      show: false,
      msgShow: true,
      potoLength: 0,
    };
  },
  async mounted() {
    this.cinemaId = this.$route.query.id;
    let res = await getDetailInfo(this.cinemaId);
    this.cinemaData = res.data.film;

    this.potoLength = this.cinemaData.photos.length;

    window.addEventListener("scroll", this.scroll);
    this.myswiper();
  },
  methods: {
    myswiper() {
      let myswiper = new Swiper(".swiper", {
        autoplay: true,
        slidesPerView: 3,

      });
    },
    back() {
      this.$router.push("/movie");
    },
    scroll() {
      if (document.documentElement.scrollTop >= 100) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    msg() {
      this.msgShow = !this.msgShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.po {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #a2a5a9;
}
.big {
  background-color: #eee;
}
.bigbox {
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  .bt {
    margin-bottom: 10px;
    color: #191a1b;
  }
}
.swiper-slide {
  width: 100%; /*设为固定值*/
  width: auto; /*根据内容调整宽度*/
  margin-right: 2px;
  p {
    font-size: 12px;
  }
}
.nav {
  position: fixed;
  top: 0;
  width: 100%;
}
.pic {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  img {
    overflow: hidden;
    position: absolute;
    top: -60%;
    transform: scale(1, 1);
    width: 100%;
    // height: 100%;
  }
}

.text {
  padding: 12px 15px 15px;
  background-color: #fff;
  .title {
    font-size: 18px;
    color: #191a1b;
    ::v-deep span {
      background-color: #d2d6dc;
      padding: 0px 2px;
      font-size: 12px;
      color: #fff;
    }
  }
  .icon {
    text-align: center;
  }
  .van-icon {
    text-align: center;
  }
  .desc {
    font-size: 13px;
    margin: 4px 0px 0px;
    color: #797d82;
  }
  .data {
    font-size: 13px;
    margin: 4px 0px 0px;
    color: #797d82;
  }
  .time {
    font-size: 13px;
    margin: 4px 0px 0px;
    color: #797d82;
  }
  .active {
    font-size: 13px;
    margin: 12px 0px 0px;
    color: #797d82;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mioashu {
    font-size: 13px;
    margin: 12px 0px 0px;
    color: #797d82;
    height: 50px;
    animation: heiAni 1s linear;
  }
  .tiyi {
    font-size: 13px;
    margin: 12px 0px 0px;
    z-index: 1;
    color: #797d82;
    line-height: 20px;
  }
  .text .van-icon[data-v-2044311d] {
    z-index: 1;
  }
}

.actor {
  height: 170px;
  p {
    width: 88px;
  }
  img {
    // height: 90px;
    width: 88px;
  }
}

.photo {
  img {
    width: 100%;
  }
}
</style>
